<template>
    <div class="page-container index-container">
        <div class="m-GenBox page-main">

            <div class="searchBox clearfix">
                <div class="condition">
                    <el-select v-model="value1" class="genSelect item mr20 w150" placeholder="请选择年度" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <el-select v-model="value2" class="genSelect item mr20 w150" placeholder="请选择年级" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <el-select v-model="value3" class="genSelect item mr20 w150" placeholder="请选择学科" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <el-select v-model="value4" class="genSelect item mr20 w150" placeholder="请选择学校" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options4"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <el-select v-model="value5" class="genSelect item mr20 w150" placeholder="请选择班级" @change="selectChange" :clearable="true">
                        <el-option
                            v-for="item in options5"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <!-- <div class="condition">
                    <span class="mr20 searchTit">选择考试</span>
                    <el-select v-model="value2" class="item mr20 w150" placeholder="请选择考试">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div> -->

                <div class="condition">
                    <el-button type="primary" >查询</el-button>
                </div>
            </div>


            <div class="mainTab clearfix mt40">
                <div class="activeBg" ref="activeBg"></div>
                <div class="tab" :class="{'activ':index==active}" v-for="(item,index) in tabList" @click="changeTab(index)">{{item}}</div>
            </div>

            <!-- <div class="u-tabs-button pdt20">
                <div :class="['u-button',{'active':active==0}]" @click="active=0">概况</div>
                <div :class="['u-button',{'active':active==1}]" @click="active=1">增值评价</div>
                <div :class="['u-button',{'active':active==2}]" @click="active=2">上线指标</div>
                <div :class="['u-button',{'active':active==3}]" @click="active=3">样本特性</div>
                <div :class="['u-button',{'active':active==4}]" @click="active=4">成绩分布</div>
                <div :class="['u-button',{'active':active==5}]" @click="active=5">百分分布</div>
                <div :class="['u-button',{'active':active==6}]" @click="active=6">标准分</div>
                <div :class="['u-button',{'active':active==7}]" @click="active=7">人口学统计</div>
                <div :class="['u-button',{'active':active==8}]" @click="active=8">自定义指标</div>
            </div> -->


            <div class="gen-row pdt40 clearfix" v-if="step==0">
                <div class="page-tit">区常模</div>
                <div class="clearfix pdt20">
                    <div class="module-box gen-shadow u-flex_col">
                        <div class="tit">总分常模表（小学）</div>
                        <div class="u-flex ofh">
                            <el-table class="highL" :data="tableData" height="386px" style="width: 100%" :header-cell-style="{background:'#f4f5f9',fontSize:'16px',color:'#747e93',padding:'0 20px',height:'50px'}" :cell-style="{height:'58px',fontSize:'16px',color:'#333333'}">
                                <el-table-column prop="name" label="评价内容">
                                </el-table-column>
                                <el-table-column align='right' prop="num" label="分数">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                    <div class="module-box gen-shadow u-flex_col">
                        <div class="tit">总分常模表（初中）</div>
                        <div class="u-flex">
                            <el-table class="highL" :data="tableData2" height="386px" style="width: 100%" :header-cell-style="{background:'#f4f5f9',padding:'0 20px',fontSize:'16px',color:'#747e93',height:'50px'}" :cell-style="{height:'58px',fontSize:'16px',color:'#333333'}">
                                <el-table-column prop="name" label="评价内容">
                                </el-table-column>
                                <el-table-column prop="num"  align='right' label="分数">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>

                <div class="page-tit pdt50">增值评价</div>
                <div class="clearfix pdt20">
                    <div class="module-box gen-shadow u-flex_col">
                        <div class="tit">增值评价表（小学）
                            <div class="tips">注：T分标红为退步</div>
                        </div>
                        
                        <div class="u-flex posRe cusMiniScroll miniScroll">
                            <div class="flexTableHead u-flex_col">
                                <table cellpadding='0' cellspacing='0' class="fullevaluate">
                                    <tr>
                                        <th rowspan="2" class="schoolName">学校名称</th>
                                        <th v-for="(item,index) in tableData3[0].value" class="year" :class="{'qs':index==1}" :colspan="index>0?2:1">
                                            {{item.year}}年
                                        </th>
                                        <th rowspan="2" class="gutter" style="width:5px;"></th>
                                    </tr>
                                    <tr>
                                        <template v-for="(item,index) in tableData3[0].value" v-if="index==0">
                                            <th>
                                                T分
                                            </th>
                                        </template>
                                        <template v-else>
                                            <th :class="{'qs':index==1}">
                                                T分
                                            </th>
                                            <th :class="{'qs':index==1}">
                                                T分变化值
                                            </th>
                                        </template>
                                    </tr>
                                </table>
                            
                                <div class="realTable u-flex cusMiniScroll miniScroll">
                                    <table cellpadding='0' cellspacing='0' class="fullevaluate">
                                        <tr v-for="(item,index) in tableData3">
                                            <td class="schoolName qs">{{item.name}}</td>
                                            <template v-for="(sitem,sindex) in item.value" v-if="sindex==0">
                                                <td>{{sitem.num}}</td>
                                            </template>
                                            <template v-else>
                                                <td :class="{'qs':sindex==1}">{{sitem.num}}</td>
                                                <td :class="{'qs':sindex==1,'reduce':(sitem.num - item.value[sindex-1].num)<0}">{{(sitem.num - item.value[sindex-1].num).toFixed(2)}}</td>
                                            </template>
                                        </tr>
                                    </table>
                                </div>

                            </div>

                        </div>
                    </div>

                    <div class="module-box gen-shadow u-flex_col">
                        <div class="tit">增值评价表表（初中）
                            <div class="tips">注：T分标红为退步</div>
                        </div>
                        <div class="u-flex posRe cusMiniScroll miniScroll">
                            <div class="flexTableHead u-flex_col">
                                <table cellpadding='0' cellspacing='0' class="fullevaluate yellow">
                                    <tr>
                                        <th rowspan="2" class="schoolName">学校名称</th>
                                        <th v-for="(item,index) in tableData4[0].value" class="year" :class="{'qs':index==1}" :colspan="index>0?2:1">
                                            {{item.year}}年
                                        </th>
                                        <th class="gutter" rowspan="2" style="width:5px;"></th>
                                    </tr>
                                    <tr>
                                        <template v-for="(item,index) in tableData4[0].value" v-if="index==0">
                                            <th>
                                                T分
                                            </th>
                                        </template>
                                        <template v-else>
                                            <th :class="{'qs':index==1}">
                                                T分
                                            </th>
                                            <th :class="{'qs':index==1}">
                                                T分变化值
                                            </th>
                                        </template>
                                    </tr>
                                </table>
                            
                                <div class="realTable u-flex cusMiniScroll miniScroll">
                                    <table cellpadding='0' cellspacing='0' class="fullevaluate">
                                        <tr v-for="(item,index) in tableData4">
                                            <td class="schoolName qs">{{item.name}}</td>
                                            <template v-for="(sitem,sindex) in item.value" v-if="sindex==0">
                                                <td>{{sitem.num}}</td>
                                            </template>
                                            <template v-else>
                                                <td :class="{'qs':sindex==1}">{{sitem.num}}</td>
                                                <td :class="{'qs':sindex==1,'reduce':(sitem.num - item.value[sindex-1].num)<0}">{{(sitem.num - item.value[sindex-1].num).toFixed(2)}}</td>
                                            </template>
                                        </tr>
                                    </table>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>


            <div class="gen-row pdt40 clearfix"  v-if="step==1"> 
                <div class="fullgenBox gen-shadow clearfix u-flex_col">
                    <div class="tit">总分成绩（{{value2}}）</div>
                    <div class="u-flex" style="padding:0 40px 20px 20px;">
                        <u-barEchart ref="cxfz3" v-if="isUpdate"
                            :keyId="'cxfz3'"  xAxisName="学校" yAxisName="成绩"
                            :legend="legendList1" :list="finallist1" :markVal='510'  :grid="{left:40,bottom:80}" :yMax='600' hasDiff>
                        </u-barEchart>
                    </div>
                </div>
            </div>


            <div class="gen-row pdt40 clearfix"  v-if="step==2"> 
                <div class="fullgenBox gen-shadow u-flex_col" key="cxfz6">
                    <div class="tit">{{value3}}成绩（小学）</div>
                    <div class="u-flex" style="padding:0 40px 20px 20px;">
                        <u-barEchart
                        :keyId="'cxfz6'" xAxisName="学校" yAxisName="成绩"
                        :legend="legendList2" :list="list2" :markVal='70' :grid="{left:40,bottom:80}"  :yMax='100' hasDiff>
                        </u-barEchart>
                    </div>
                </div>
                <div class="fullgenBox gen-shadow u-flex_col mt20">
                    <div class="tit">{{value3}}百分分布图（小学）</div>
                    <div class="u-flex" style="padding:0 40px 20px 20px;">
                        <u-boxplotEchart 
                            :keyId="'per1'" yAxisName="评价指数" xAxisName="学校" :markVal="[12,94]"
                            :legend="legendList5" :list="list5" hasDiff :grid="{bottom:100}">
                        </u-boxplotEchart>
                    </div>
                </div>
                <div class="fullgenBox gen-shadow u-flex_col mt20">
                    <div class="tit">{{value3}}散点图（小学）</div>
                    <div class="u-flex" style="padding:0 40px 20px 20px;">
                        <u-scatterEchart 
                            :keyId="'sxzbs1'" yAxisName="学校均值" xAxisName="变异系数"  
                            :legend="legendList4" :list="list4" :grid="{right:90}"
                            :yMax='100' :xMax='0.24' :yMin='80' :xMin='0.04' :markVal="88" hasDiff>
                        </u-scatterEchart>
                    </div>
                </div>
            </div>

            <div class="gen-row pdt40 clearfix u-flex_col" v-if="step==3">
                <div class="fullgenBox gen-shadow u-flex_col" style="height:auto;">
                    <div class="tit">增值评价表-{{value3}}</div>
                    <div class="u-flex posRe cusMiniScroll miniScroll">
                            <div class=" u-flex_col">
                                <table cellpadding='0' cellspacing='0' class="fullevaluate blue">
                                    <tr>
                                        <th rowspan="2" class="schoolName">学校名称</th>
                                        <th v-for="(item,index) in tableData3[0].value" class="year" :class="{'qs':index==1}" :colspan="index>0?2:1">
                                            {{item.year}}年
                                        </th>
                                        <th rowspan="2" class="gutter" style="width:8px;"></th>
                                    </tr>
                                    <tr>
                                        <template v-for="(item,index) in tableData3[0].value" v-if="index==0">
                                            <th>
                                                T分
                                            </th>
                                        </template>
                                        <template v-else>
                                            <th :class="{'qs':index==1}">
                                                T分
                                            </th>
                                            <th :class="{'qs':index==1}">
                                                T分变化值
                                            </th>
                                        </template> 
                                    </tr>
                                </table>
                            
                                <div class="realTable u-flex cusMiniScroll miniScroll">
                                    <table cellpadding='0' cellspacing='0' class="fullevaluate">
                                        <tr v-for="(item,index) in tableData3" :key="index">
                                            <td class="schoolName qs">{{item.name}}</td>
                                            <template v-for="(sitem,sindex) in item.value" v-if="sindex==0">
                                                <td>{{sitem.num}}</td>
                                            </template>
                                            <template v-else>
                                                <td :class="{'qs':sindex==1}">{{sitem.num}}</td>
                                                <td :class="{'qs':sindex==1,'reduce':(sitem.num - item.value[sindex-1].num)<0}">{{(sitem.num - item.value[sindex-1].num).toFixed(2) }}</td>
                                            </template>
                                        </tr>
                                    </table>
                                </div>

                            </div>

                    </div>

                    <el-pagination class="pagination"
                    background
                    layout="prev, pager, next"
                    :total="1000">
                    </el-pagination>
                </div>
            </div>


            <div class="gen-row pdt40 clearfix" v-if="step==4">
                <div class="half-box">
                    <div class="module-box gen-shadow u-flex_col" style="height:580px;">
                        <div class="tit">{{value3}}学科柱状图</div>
                        <div class="u-flex" style="padding:0 40px 20px 20px;">
                            <u-barEchart
                            :keyId="'cxfz-step4-1'" yAxisName="成绩" xAxisName="单位"
                            :legend="legendList3" :list="list3" :markVal='80' :yMax='100' hasDiff>
                            </u-barEchart>
                        </div>
                    </div>
                    <div class="module-box gen-shadow u-flex_col mt20">
                        <div class="tit">{{value3}}达标率雷达图</div>
                        <div class="u-flex" style="padding:0 40px 20px 20px;">
                            <div class="left_chart">
                                <u-radarEchart 
                                    keyId="cxfz-step4-2" 
                                    :legend="legendList6" :list="list6" :shapeType="'circle'" disLegend>
                                </u-radarEchart>
                            </div>
                            <div class="right_legend">
                                <div class="legend">
                                    <div class="title clearfix">
                                        <span v-for="(item,index) in legendList6" :key="index">
                                            <i :style="'background:'+ item.color +';'"></i>{{item.name}}
                                        </span>
                                    </div>
                                    <div class="con">
                                        <dl v-for="(item,index) in legendList6" :key="index">
                                            <dt>{{item.name}}</dt>
                                            <dd v-for="(val,indval) in list6" :key="indval">
                                                {{val.name+"："+val.value[index]}}
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="half-box">
                    <div class="module-box high-box gen-shadow u-flex_col">
                        <div class="tit">增值评价表-{{value3}}</div>
                        <div class="posRe cusMiniScroll">
                            <div class="u-flex_col">
                                <table cellpadding='0' cellspacing='0' class="fullevaluate blue">
                                    <tr>
                                        <th rowspan="2" class="schoolName">学校名称</th>
                                        <th v-for="(item,index) in tableData3[0].value" class="year" :class="{'qs':index==1}" :colspan="index>0?2:1">
                                            {{item.year}}年
                                        </th>
                                        <th rowspan="2" class="gutter" style="width:24px;"></th>
                                    </tr>
                                    <tr>
                                        <template v-for="(item,index) in tableData3[0].value" v-if="index==0">
                                            <th>
                                                T分
                                            </th>
                                        </template>
                                        <template v-else>
                                            <th :class="{'qs':index==1}">
                                                T分
                                            </th>
                                            <th :class="{'qs':index==1}">
                                                T分变化值
                                            </th>
                                        </template>
                                    </tr>
                                </table>
                            
                                <div class="realTable u-flex cusMiniScroll">
                                    <table cellpadding='0' cellspacing='0' class="fullevaluate">
                                        <tr v-for="(item,index) in tableData5">
                                            <td class="schoolName qs">{{value2+item.name}}</td>
                                            <template v-for="(sitem,sindex) in item.value" v-if="sindex==0">
                                                <td>{{sitem.num}}</td>
                                            </template>
                                            <template v-else>
                                                <td :class="{'qs':sindex==1}">{{sitem.num}}</td>
                                                <td :class="{'qs':sindex==1,'reduce':(sitem.num - item.value[sindex-1].num)<0}">{{(sitem.num - item.value[sindex-1].num).toFixed(2) }}</td>
                                            </template>
                                        </tr>
                                    </table>
                                </div>

                            </div>

                        </div>


                        <div class="clearfix u-flex_col" style="height:370px;">
                            <div class="tit">{{value4}}T分变化图</div>
                            <div class="u-flex" style="padding:0 40px 20px 20px;">
                                <u-lineEchart 
                                    keyId="cxfz-step4-3" xAxisName="年度" :yMax="100" fontNomal
                                    :legend="legendList7" :list="list7">
                                </u-lineEchart>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="module-box gen-shadow u-flex_col mt20">
                        <div class="tit">{{value4}}T分变化图</div>
                        <div class="u-flex" style="padding:0 20px 10px;">
                            <u-lineEchart 
                                keyId="cxfz-step4-3" xAxisName="年度" :yMax="100" fontNomal
                                :legend="legendList7" :list="list7">
                            </u-lineEchart>
                        </div>
                    </div> -->
                </div>
                
            </div>






        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tabList:['概况','增值评价','上线指标','样本特性','成绩分布','百分分布','标准分','人口学统计','自定义指标'],
            step:0,
            active:0,
            tableData:[
                {name:'区总分',num:'381'},
                {name:'义蓬第三小学',num:'352'},{name:'义蓬第四小学',num:'368'},{name:'义蓬第一小学',num:'391'},
                {name:'宏图小学',num:'353'},{name:'新围小学',num:'350'},
                {name:'钱江小学',num:'320'},{name:'听涛小学',num:'360'},
                {name:'江湾小学',num:'324'}
                ],
            tableData2:[{name:'区总分',num:'388'},{name:'河庄初级中学',num:'352'},{name:'启慧初中',num:'368'},{name:'启成中学',num:'391'},
                {name:'前进中学',num:'353'},{name:'下沙中学',num:'350'},{name:'新围中学',num:'375'},
                {name:'义蓬中学',num:'327'}
            ],
            tableData3:[
                {
                    name:'义蓬第三小学',
                    value:[
                        {
                            year:'2018',
                            num:51.35,
                        },{
                            year:'2019',
                            num:52.15,
                        },{
                            year:'2020',
                            num:52.85,
                        }
                        
                    ]
                },{
                    name:'义蓬第四小学',
                    value:[
                        {
                            year:'2018',
                            num:50.05,
                        },{
                            year:'2019',
                            num:52.00,
                        },{
                            year:'2020',
                            num:50.95,
                        }
                        
                    ]
                },{
                    name:'义蓬第一小学',
                    value:[
                        {
                            year:'2018',
                            num:52.35,
                        },{
                            year:'2019',
                            num:54.00,
                        },{
                            year:'2020',
                            num:54.55,
                        }
                        
                    ]
                },{
                    name:'宏图小学',
                    value:[
                        {
                            year:'2018',
                            num:50.00,
                        },{
                            year:'2019',
                            num:54.35,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                },{
                    name:'新围小学',
                    value:[
                        {
                            year:'2018',
                            num:51.45,
                        },{
                            year:'2019',
                            num:52.85,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                },{
                    name:'钱江小学',
                    value:[
                        {
                            year:'2018',
                            num:51.45,
                        },{
                            year:'2019',
                            num:52.85,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                },{
                    name:'听涛小学',
                    value:[
                        {
                            year:'2018',
                            num:51.45,
                        },{
                            year:'2019',
                            num:52.85,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                },{
                    name:'江湾小学',
                    value:[
                        {
                            year:'2018',
                            num:51.45,
                        },{
                            year:'2019',
                            num:52.85,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                }
            ],
            tableData4:[
                {
                    name:'河庄初级中学',
                    value:[
                        {
                            year:'2018',
                            num:51.00,
                        },{
                            year:'2019',
                            num:52.00,
                        },{
                            year:'2020',
                            num:52.00,
                        }
                        
                    ]
                },{
                    name:'启慧初中',
                    value:[
                        {
                            year:'2018',
                            num:50.12,
                        },{
                            year:'2019',
                            num:52.23,
                        },{
                            year:'2020',
                            num:50.63,
                        }
                        
                    ]
                },{
                    name:'启成中学',
                    value:[
                        {
                            year:'2018',
                            num:52.00,
                        },{
                            year:'2019',
                            num:54.00,
                        },{
                            year:'2020',
                            num:54.15,
                        }
                        
                    ]
                },{
                    name:'前进中学',
                    value:[
                        {
                            year:'2018',
                            num:50.25,
                        },{
                            year:'2019',
                            num:54.85,
                        },{
                            year:'2020',
                            num:52.00,
                        }
                        
                    ]
                },{
                    name:'下沙中学',
                    value:[
                        {
                            year:'2018',
                            num:51.65,
                        },{
                            year:'2019',
                            num:52.12,
                        },{
                            year:'2020',
                            num:52.25,
                        }
                        
                    ]
                },{
                    name:'新围中学',
                    value:[
                        {
                            year:'2018',
                            num:51.05,
                        },{
                            year:'2019',
                            num:52.25,
                        },{
                            year:'2020',
                            num:52.65,
                        }
                        
                    ]
                },{
                    name:'义蓬中学',
                    value:[
                        {
                            year:'2018',
                            num:51.00,
                        },{
                            year:'2019',
                            num:52.25,
                        },{
                            year:'2020',
                            num:52.65,
                        }
                        
                    ]
                }
            ],
            tableData5:[
                {
                    name:'（1）班',
                    value:[
                        {
                            year:'2018',
                            num:51.35,
                        },{
                            year:'2019',
                            num:52.15,
                        },{
                            year:'2020',
                            num:52.85,
                        }
                        
                    ]
                },{
                    name:'（2）班',
                    value:[
                        {
                            year:'2018',
                            num:50.05,
                        },{
                            year:'2019',
                            num:52.00,
                        },{
                            year:'2020',
                            num:50.95,
                        }
                        
                    ]
                },{
                    name:'（3）班',
                    value:[
                        {
                            year:'2018',
                            num:52.35,
                        },{
                            year:'2019',
                            num:54.00,
                        },{
                            year:'2020',
                            num:54.55,
                        }
                        
                    ]
                },{
                    name:'（4）班',
                    value:[
                        {
                            year:'2018',
                            num:50.00,
                        },{
                            year:'2019',
                            num:54.35,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                },{
                    name:'（5）班',
                    value:[
                        {
                            year:'2018',
                            num:51.45,
                        },{
                            year:'2019',
                            num:52.85,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                },{
                    name:'（6）班',
                    value:[
                        {
                            year:'2018',
                            num:51.45,
                        },{
                            year:'2019',
                            num:52.85,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                },{
                    name:'（7）班',
                    value:[
                        {
                            year:'2018',
                            num:51.45,
                        },{
                            year:'2019',
                            num:52.85,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                },{
                    name:'（8）班',
                    value:[
                        {
                            year:'2018',
                            num:51.45,
                        },{
                            year:'2019',
                            num:52.85,
                        },{
                            year:'2020',
                            num:52.55,
                        }
                        
                    ]
                }
            ],
            value1:'',
            options1:[{label:'2018年度',value:'2018'},{label:'2019年度',value:'2019'},{label:'2020年度',value:'2020'}],
            value2:'',
            options2:[{label:'一年级',value:'一年级'},{label:'二年级',value:'二年级'},{label:'三年级',value:'三年级'},{label:'四年级',value:'四年级'},{label:'五年级',value:'五年级'},{label:'六年级',value:'六年级'},{label:'七年级',value:'七年级'},{label:'八年级',value:'八年级'},{label:'九年级',value:'九年级'},],
            value3:'',
            options3:[{label:'总分',value:'总分'},{label:'语文',value:'语文'},{label:'数学',value:'数学'},{label:'英语',value:'英语'},{label:'科学',value:'科学'}],
            value4:'',
            options4:[{label:'龙峰国际小学',value:'龙峰国际小学'},{label:'义蓬第三小学',value:'义蓬第三小学'},{label:'义蓬第四小学',value:'义蓬第四小学'},{label:'义蓬第一小学',value:'义蓬第一小学'},{label:'宏图小学',value:'宏图小学'},{label:'新围小学',value:'新围小学'}],
            value5:'',
            options5:[{label:'一(1)班',value:'一(1)班'},{label:'一(2)班',value:'一(2)班'},{label:'二(1)班',value:'二(2)班'},{label:'三(1)班',value:'三(1)班'},{label:'四(1)班',value:'四(1)班'}],

            legendList1:[
                {name:'高于钱塘新区',min:510,max:600,color:'#2188e7',itemcolor:['#50a5f9','#3d39ee']},
                {name:'钱塘新区',key:1,color:'#2cd581',itemcolor:['#2cd581','#23c5a1']},
                {name:'低于钱塘新区',min:0,max:510,color:'#f9c076',itemcolor:['#f9c650','#ee8138']},
            ],
            list1:[
                
                {name:"义蓬第三小学",value:[560.15]},
                {name:"义蓬第四小学",value:[550.26]},
                {name:"义蓬第一小学",value:[545.35]},
                {name:"明珠小学",value:[540.28]},
                {name:"临江第一小学",value:[535.36]},
                {name:"临江新城实验小学",value:[520.17]},
                {name:"河庄小学",value:[515.36]},

                {name:"区级",key:1,value:[510.08]},

                {name:"义蓬第二小学",value:[509.65]},
                {name:"宏图小学",value:[502.35]},
                {name:"新围小学",value:[500.22]},
                {name:"前进第一小学",value:[495.37]},
                {name:"宏图小学",value:[495.15]},
                {name:"前进第一小学",value:[491.26]},
                {name:"新湾小学",value:[490.37]},
                {name:"启慧小学",value:[490.48]},
                {name:"钱江小学",value:[488.51]},
                {name:"学正小学",value:[486.62]},
                {name:"听涛小学",value:[482.73]},
                {name:"月雅河小学",value:[478.84]},
                {name:"江湾小学",value:[476.95]},
                {name:"景苑小学",value:[475.52]},
                {name:"下沙第二小学",value:[470.63]},
                {name:"下沙第一小学",value:[465.71]},
            ],
            finallist1:[],
            list71:[
                
                {name:"义蓬第三中学",value:[560.15]},
                {name:"义蓬第四中学",value:[550.26]},
                {name:"义蓬第一中学",value:[545.35]},
                {name:"明珠中学",value:[540.28]},
                {name:"临江第一中学",value:[535.36]},
                {name:"临江新城实验中学",value:[520.17]},
                {name:"河庄中学",value:[515.36]},

                {name:"区级",key:1,value:[510.08]},

                {name:"义蓬第二中学",value:[509.65]},
                {name:"宏图中学",value:[502.35]},
                {name:"新围中学",value:[500.22]},
                {name:"前进第一中学",value:[495.37]},
                {name:"宏图中学",value:[495.15]},
                {name:"前进第一中学",value:[491.26]},
                {name:"新湾中学",value:[490.37]},
                {name:"启慧中学",value:[490.48]},
                {name:"钱江中学",value:[488.51]},
                {name:"学正中学",value:[486.62]},
                {name:"听涛中学",value:[482.73]},
                {name:"月雅河中学",value:[478.84]},
                {name:"江湾中学",value:[476.95]},
                {name:"景苑中学",value:[475.52]},
                {name:"下沙第二中学",value:[470.63]},
                {name:"下沙第一中学",value:[465.71]},
            ],
            legendList2:[
                {name:'高于钱塘新区',min:70,max:100,color:'#2188e7',itemcolor:['#50a5f9','#3d39ee']},
                {name:'钱塘新区',key:1,color:'#2cd581',itemcolor:['#2cd581','#23c5a1']},
                {name:'低于钱塘新区',min:0,max:70,color:'#f9c076',itemcolor:['#f9c650','#ee8138']},
            ],
            list2:[
                {name:"义蓬第三小学",value:[89.02]},
                {name:"义蓬第四小学",value:[89.15]},
                {name:"义蓬第一小学",value:[88.24]},
                {name:"明珠小学",value:[85.33]},
                {name:"临江第一小学",value:[82.42]},
                {name:"临江新城实验小学",value:[82.51]},
                {name:"河庄小学",value:[79.62]},
                {name:"义蓬第二小学",value:[78.73]},
                {name:"宏图小学",value:[76.84]},
                {name:"新围小学",value:[76.25]},
                {name:"前进第一小学",value:[75.06]},
                {name:"宏图小学",value:[72.23]},

                {name:"区级",key:1,value:[70.05]},

                {name:"前进第一小学",value:[70.01]},
                {name:"新湾小学",value:[69.55]},
                {name:"启慧小学",value:[69.25]},
                {name:"钱江小学",value:[68.23]},
                {name:"学正小学",value:[68.02]},
                {name:"听涛小学",value:[66.35]},
                {name:"月雅河小学",value:[66.04]},
                {name:"江湾小学",value:[65.06]},
                {name:"景苑小学",value:[64.56]},
                {name:"下沙第二小学",value:[64.35]},
                {name:"下沙第一小学",value:[62.58]},
            ],
            legendList3:[
                {name:'班级',min:0,max:100,color:'#2188e7',itemcolor:['#50a5f9','#3d3aee',]},
                {name:'钱塘新区',key:1,color:'#2cd581',itemcolor:['#2cd581','#23c5a1']},
                {name:'校均分',key:2,color:'#f9c076',itemcolor:['#f9c650','#ee8138',]}
            ],
            list3:[
                {name:"一年级(8)班",value:[73.58]},
                {name:"钱塘新区",key:1,value:[74.25]},
                {name:"一年级(7)班",value:[75.12]},
                {name:"一年级(6)班",value:[78.32]},
                {name:"校均分",key:2,value:[80.46]},
                {name:"一年级(5)班",value:[81.59]},
                {name:"一年级(4)班",value:[82.25]},
                {name:"一年级(3)班",value:[84.09]},
                {name:"一年级(2)班",value:[85.38]},
                {name:"一年级(1)班",value:[89.95]},  
            ],
            legendList4:[
                {name:'钱塘新区',key:1,color:'#00cd86'},
                {name:'高于钱塘新区',key:2,color:'#3594ff'},
                {name:'低于钱塘新区',key:3,color:'#fdb628'},
            ],
            list4:[
                {name:"义蓬第三小学",key:2,value:[[0.068,97]]},
                {name:"义蓬第四小学",key:3,value:[[0.058,86]]},
                {name:"义蓬第一小学",key:2,value:[[0.048,98]]},
                {name:"明珠小学",key:2,value:[[0.082,91]]},
                {name:"临江第一小学",key:2,value:[[0.105,93]]},
                {name:"河庄小学",key:3,value:[[0.113,85]]},
                {name:"宏图小学",key:2,value:[[0.126,94]]},
                {name:"新围小学",key:2,value:[[0.168,95]]},

                {name:"钱塘新区",key:1,value:[[0.148,88]]},

                {name:"新湾小学",key:3,value:[[0.18,87]]},
                {name:"启慧小学",key:3,value:[[0.162,85]]},
                {name:"钱江小学",key:2,value:[[0.198,94]]},
                {name:"月雅河小学",key:3,value:[[0.219,83]]},
                {name:"江湾小学",key:2,value:[[0.219,95]]},
                {name:"下沙第二小学",key:2,value:[[0.206,97]]},
                {name:"下沙第一小学",key:3,value:[[0.24,87]]},
            ],
            
            legendList5:[
                {name:'钱塘新区',key:1,color:'#00cd86',itemcolor:['#23c5a2','#2dd681']},
                {name:'高于钱塘新区',min:94,max:100,color:'#3594ff',itemcolor:['#5063f6','#4799ff']},
                {name:'低于钱塘新区',min:0,max:94,color:'#fdb628',itemcolor:['#ff9000','#ffc600']},
            ],
            list5:[
                {name:"义蓬第三小学",value:[[11, 25, 50, 78, 100]]},
                {name:"义蓬第四小学",value:[[10, 24, 49, 77, 99]]},
                {name:"义蓬第一小学",value:[[9, 23, 48, 76, 98]]},
                {name:"金沙湖东方校区",value:[[8, 22, 47, 75, 95]]},
                {name:"启成中学",value:[[9, 22, 50, 78, 97]]},
                {name:"明珠学校",value:[[9, 22, 50, 78, 97]]},
                {name:"临江第一小学",value:[[9, 22, 50, 78, 97]]},
                {name:"临江新城实验小学",value:[[8, 21, 49, 77, 96]]},
                {name:"河庄小学",value:[[8, 21, 49, 77, 96]]},
                {name:"义蓬第二小学",value:[[8, 20.5, 48.5, 76.5, 95.5]]},
                {name:"宏图小学",value:[[7, 20, 48, 76, 95]]},
                {name:"区级",key:1,value:[[12, 23, 50, 78, 94]]},
                {name:"新围小学",value:[[3, 18, 43, 70, 93]]},
                {name:"前进第一小学",value:[[3, 18, 43, 70, 93]]},
                {name:"新湾小学",value:[[3, 18, 43, 70, 93]]},
                {name:"启慧小学",value:[[2, 17, 42.5, 69.5, 92]]},
                {name:"市教研室附校",value:[[3.5, 19, 45, 72, 92]]},
                {name:"杭经开金沙湖实验学校",value:[[3, 18, 43, 70, 93]]},
                {name:"钱江小学",value:[[3, 18, 43, 70, 93]]},
                {name:"学正小学",value:[[2, 18, 42, 70, 92]]},
                {name:"听涛小学",value:[[3, 18, 43, 70, 93]]},
                {name:"月雅河小学",value:[[3, 18, 43, 70, 93]]},
                {name:"启源小学",value:[[3, 18, 43, 70, 93]]},
                {name:"江湾小学",value:[[2, 17, 42.5, 69.5, 92]]},
                {name:"景苑小学",value:[[3.5, 19, 45, 72, 92]]},
                {name:"下沙第二小学",value:[[3, 18, 43, 70, 93]]},
                {name:"下沙第一小学",value:[[3, 18, 43, 70, 93]]},
                {name:"新阳光学校",value:[[2, 18, 42, 70, 92]]},
                {name:"学林街小学",value:[[2, 17, 42.5, 69.5, 92]]},
                {name:"金沙湖金沙校区",value:[[3.5, 19, 45, 72, 92]]},
                {name:"江湾小学",value:[[3, 18, 43, 70, 93]]},
                {name:"钱江小学",value:[[3, 18, 43, 70, 93]]},
                {name:"实验外国语学校",value:[[2, 18, 42, 70, 92]]},
            ],
            legendList6:[
                {name:'区级',color:'#00cd86'},
                {name:'本校',color:'#3594ff'},
            ],
            list6:[
                {name:"优秀率",radarMax:100,value:[75,62]},
                {name:"良好率",radarMax:100,value:[80,84]},
                {name:"及格率",radarMax:100,value:[95,78]},
                {name:"低分率",radarMax:100,value:[18,50]},
            ],
            legendList7:[
                {name:'T分',color:'#2188E7',areaStyleColor:"#168DFF"},
            ],
            list7:[
                {name:"2018年",value:[66]},
                {name:"2019年",value:[65]},
                {name:"2020年",value:[77]},
            ],
            isUpdate: true
        }
    },
    mounted(){
        this.finallist1=this.list1
    },
    watch:{
        active() {
            this.selectChange();
        },
        value2(){
            this.isUpdate = false
            if(this.value2=='七年级'||this.value2=='八年级'||this.value2=='九年级'){
                this.finallist1=this.list71
            }
            else{
                this.finallist1=this.list1
            }
            this.$nextTick(()=>{
                this.isUpdate = true
            })
        }
    },
    methods:{
        selectChange(){
            if(this.value1&&this.value2&&this.value3&&this.value4){
                this.step = 4;
                this.changeTab(0)
            }else if(this.value1&&this.value2&&this.value3&&this.active==1){
                this.step = 3
            }else if(this.value1&&this.value2&&this.value3){
                this.step = 2
            }else if(this.value1&&this.value2){
                this.step = 1
            }else{
                this.step = 0
            }
        },
        changeTab(index){
            this.active = index;
            this.$refs['activeBg'].style.left = (index*120) + "px";
        }
    }
}
</script>

<style lang='scss' scoped>
 @import "../../assets/scss/deep.scss";

.mainTab{
    .tab{
        width: 120px !important;
    }
    .activeBg{
        width: 120px !important;
    }
}
.gen-row{
    float: left;
}
.page-main{
    padding: 30px 40px;
}
.half-box{
    width: 50%;
    padding-right: 20px;
    float: left;
    .module-box{
        width: 100%;
        &.high-box{
            height: 1050px;
        }
    }
    
}
.page-tit{
    font-size: 22px;
    font-weight: bold;
    color: #333;
}
.module-box{
    float: left;
    width: 48%;
    height: 450px;
    margin-right: 2%;
    border-radius: 5px;
    background: #FFF;
    overflow: hidden;
    .tit{
        width: 100%;
        padding: 20px 30px;
        font-size: 18px;
        color: #333333;
        font-weight: bold;
        position: relative;
        .tips{
            position: absolute;
            font-size: 16px;
            color: #747e93;
            top: 25px;
            right:20px;
            font-weight: normal;
            &::after{
                content: '\20';
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background: #ff7b12;
                position: absolute;
                left: -20px;
                top:6px;
            }
        }
    }
}
.fullevaluate{
    width: 100%;
    // table-layout: fixed;
    th{
        background: #e7e8ef;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #747e93;
        width: 120px;
        &.schoolName{
            width: 150px;
            background: #f4f5f9;
            word-wrap:break-word;word-break:break-all;
        }
        &.year{
            background: #00cd86;
            color: #FFF;
            &.qs{
                background: #4bdba9;
            } 
        }
        &.qs{
            background: #f4f5f9;
        }
    }
    &.yellow{
        th{
            &.year{
            background: #ffb750;
            color: #FFF;
            &.qs{
                background: #fec779;
            }
        }
        }
    }
    &.blue{
        th{
            &.year{
                background: #3964F9;
                color: #FFF;
                &.qs{
                    background: #7896FF;
                }
        }
        }
    }
    td{
        font-size: 16px;
        text-align: center;
        height: 58px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f2f7;
        background: #f8f8fb;
        width: 120px;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        // overflow: hidden;
        &.schoolName{
            width: 150px;
            background: #f4f5f9;
            word-wrap:break-word;word-break:break-all;
        }
        &.qs{
            background: #FFF;
        }
        &.reduce{
            color: #ff7b12;
            font-weight: bold;
        }
    }
    tr:hover{
        td{
            background: #fef7f4;
            cursor: pointer;
        }
    }
}
.posRe{
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
}
.flexTableHead{
    width:100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 10;
}
.realTable{
    z-index: 5;
    overflow: auto;
    .u-flex::-webkit-scrollbar{
        display: block;
    }
}

.pagination{
    padding: 20px;
}


/deep/{
    .el-table__body{
        width: auto !important;
    }
    .el-table__body-wrapper{
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .full{
        overflow: auto;
       .el-table__body-wrapper{
           padding: 0;
       } 
    }
    .el-table th>.cell{
        padding: 0;
    }
    .highL{
        .el-table__body-wrapper tbody tr:first-child .cell{
            color: #3594ff;
            font-weight: bold;
        }
    }
    // .el-table th:last-child{
    //     text-align: right !important;
    // }
    // .el-table td:last-child{
    //     text-align: right;
    // }
}
.left_chart{
    width: 60%; height: 100%;
    float: left;
}
.right_legend{
    width: 40%;
    float: left;
    .legend{
        width: 200px;
        background: #F4F4F9;
        border-radius: 10px;
        padding: 10px 20px;
        float: right;
        .title{
            font-size: 12px; color: #000000;
            i{
                width: 10px; height: 10px;
                border-radius: 10px;
                float: left;
                margin: 4px 10px 0 0;
            }
            span{
                margin-right: 20px;
                float: left;
            }
        }
        .con{
            color: #333333;
            dl{
                padding-bottom: 20px;
            }
            dt{
                font-size: 16px;
                font-weight: bold;
                padding: 10px 0;
            }
            dd{
                font-size: 14px;
                line-height: 24px;
            }
        }
    }
}
</style>